<template>
    <div class="all">
      <div class="d2">
        <div class="dd1">
          设备编号:&nbsp;&nbsp;&nbsp;<el-input
            size="mini"
            v-model="query.facModel"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="dd2">
          区域:&nbsp;&nbsp;&nbsp;<el-select
            size="mini"
            v-model="query.areaId"
            placeholder="请选择"
          >
            <el-option
              v-for="area in options"
              :key="area.areaId"
              :label="area.areaName"
              :value="area.areaId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dd3">
          <el-row>
            <el-button type="primary" round size="small" @click="loadMount()"
              >查询</el-button
            >
            <el-button type="info" round size="small" @click="loadNew()"
              >重置</el-button
            >
          </el-row>
        </div>
      </div>
      <div class="show">
        <div>
          <span class="s1">红色显示异常，绿色显示在线，灰色显示关闭状态</span>
        </div>
        <div class="d1" v-for="(item, index) in items" :key="index" @click="toSimple(item)">
          <el-card class="box-card">
            <el-row>
              <el-col :span="8"
                ><div class="grid-content bg-purple">
                  <el-link type="primary">编号：{{ item.facModel }}</el-link>
                  <el-link type="primary">{{ item.areaName }}</el-link>
                  <el-link icon="el-icon-map-location" type="success"
                    >显示定位</el-link
                  >
                </div></el-col
              >
              <el-col :span="16"
                ><div class="grid-content bg-purple-light">
                  <!--disabled是否禁用开关  true为禁用 用户无法控制灯的开关 -->
                  监测状态 ：<el-switch
                    disabled=false
                    v-model="on"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  >
                  </el-switch
                  >
                  PM2.5:{{item.checkPm}}&nbsp;&nbsp;&nbsp;&nbsp;
                  体感温度：{{item.checkTemp}}
                  紫外线：{{item.checkRays}}
                  空气湿度：{{item.checkAir}}
                  气体压强：{{item.checkPressure}}
                  风力风向：{{item.checkWind}}
                </div></el-col
              >
            </el-row>
          </el-card>
        </div>
      </div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
    
    <script>
  export default {
    data() {
      return {
        on:true,
        value:[],
  
        items: [],
  
        options: [],
  
        query: {
          currentPage: 1, //代表当前页
          pageSize: 6, //代表每页显示多少条数据
          areaId: "",
          facModel: "",
        },
        page: {
          pageSizes: [6, 12, 30, 60, 120], //下拉列表中的数组
          total: 0, //一共有多少条数据
        },
      };
    },
    methods: {
      toSimple(item){
        sessionStorage.setItem("fach", JSON.stringify(item));
        this.$router.push("/ensimple");
      },
      loadMount() {
        this.$axios.post("fac/queryh", this.query).then((res) => {
          this.items = res.data.data.hList;
          this.page.total = res.data.data.total;
        });
      },
      loadNew() {
        this.query.areaId = "";
        this.query.facModel = "";
        this.loadMount();
      },
      loadArea() {
        this.$axios.get("area").then((res) => {
          this.options = res.data.data.areaList;
        });
      },
      handleSizeChange(val) {
        //当每页数据改变时
        this.query.pageSize = val;
        this.loadMount();
      },
      handleCurrentChange(val) {
        //当点击页码时
        this.query.currentPage = val;
        this.loadMount();
      },
    },
    mounted() {
      this.loadMount();
      this.loadArea();
    },
  };
  </script>
    <style scoped>
  .show {
    height: 350px;
    width: 1000px;
  }
  .s1 {
    font-size: 10px;
  }
  .d2 {
    width: auto;
    height: 35px;
  }
  .dd1 {
    width: 300px;
    height: 33px;
    font-size: 14px;
    float: left;
  }
  .dd2 {
    width: 300px;
    height: 33px;
    font-size: 14px;
    float: left;
  }
  .dd3 {
    width: 250px;
    height: 33px;
    font-size: 14px;
    float: right;
  }
  .el-input {
    width: 100px;
    height: 33px;
  }
  .d1 {
    float: left;
    font-size: 10px;
  }
  .text {
    font-size: 16px;
  }
  
  .item {
    padding: 18px 0;
  }
  
  .box-card {
    width: 300px;
    height: 150px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 100px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  </style>